<template>
    <!-- <transition name="fade"> -->
        <a href="trade.html">
            <img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/trade.png" class="breathe" alt="我的交易">
        </a>
    <!-- </transition> -->
</template>

<script lang="ts">
    import {Vue, Component, Prop, Emit} from 'vue-property-decorator'
    @Component
    export default class ToTradeBtn extends Vue {
        isShow = false
        mounted() {
            let that = this
            window.addEventListener("scroll",function(){
                if(document.documentElement.scrollTop > document.documentElement.clientHeight || document.body.scrollTop > document.documentElement.clientHeight){
                    that.isShow = true
                }else{
                    that.isShow = false
                }
            })
        }
    }
</script>

<style lang="scss" scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    a{
        display: block;
        width: 100px;
        height: 100px;
        img{
            width: 100%;
            height: 100%;
        }
    }

    .breathe {
    	animation-timing-function: ease-in-out;
    	animation-name:breathe;
    	animation-duration: 2300ms;
    	animation-iteration-count: infinite;
    	animation-direction: alternate;
    }
    @keyframes breathe {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(.9)
        }
    }
</style>